    
<template>
   <view class="uni-container-orderList">
        <div class="header">
            <span v-for="(item, index) in tabList" 
            :class="{Tabactive:tabIndex==index}" 
            @tap='switchBar(index)'
            :key="index">
               {{item}}
            </span>
        </div>
        <ul class='order-list' v-if="tabIndex !=3 && !noData">
           <li v-for="(item,index) in orderList" :key='index' @tap='ToOrderDetail(item)'>
               <div class='order-info clearfix'>
                   <span class='label fl'>下单时间：{{item.createdTime}}</span>
                   <span class='fr'>{{item.statusType}}</span>
                </div>
                <div class='order-buy clearfix'>
                    <span class='title fl'>{{item.contactName}}</span>
                    <span class="o-p-d fr">¥<span class="price">{{item.totalPrice}}</span></span>
                </div>
                <div class='order-travl'>
                    <span  class='label'>出行日期</span>
                    <span>{{item.merchEffectDate}}</span>
                </div>
                <div class='order-travl'>
                    <span  class='label'>出游人数</span>
                    <span>成人*{{item.merchCount}}</span>
                </div>
                <div class="border" v-if="item.status == 10||item.status == 40"></div>
                <div class='order-status clearfix'>
                    <span class='fl count-time' v-if="item.status == 10">请在{{item.countTime}}内支付</span>
                    <span class='fr buyBtn' v-if="item.status == 10" @tap.stop="pay(item)">立即支付</span>
                    <span class='fr buyBtn buyBtnGary' v-if="item.status == 40" @tap.stop="payOnceAgn(item)">再次预订</span>
                </div>
           </li>
		</ul>
        <div v-if='noData && tabIndex !==3' class="noData">
            <img src="https://cdn.yueyangshuyuan.com/kong.png" alt="">
            <div>暂无数据</div>
        </div>
        <div v-if="tabIndex ==3" class="ToComments">
            <img src="https://cdn.yueyangshuyuan.com/kong.png" alt="">
            <div>点评功能即将开放</div>
            <div>敬请期待...</div>
        </div>
    </view>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
import * as util from '../../util.js';

export default {
    computed: {
        ...mapState(['hasLogin', 'isVIP','merchInfoForOrder'])
    },
    data(){
        return{
            tabIndex:0,
            tabList:['全部订单','待付款','待出行','待点评','退款/售后'],
            orderParam:{
                status:'',
                pageNo:1,
                pageSize:10,//订单状态:10-待付款; 20-待出行; 30-已成交; 40-已取消; 50-已退款; ,
            },
            orderList:[],
            timer:null,
            testEndTime:[],
            dataJson:null,
            showType:0,
            preDataId:0,
            noData:false
        }
    },
    mounted(){},
    onLoad(options){
        this.showType = Number(options.type)||0;
    },
    methods:{
        switchBar(index){
            this.tabIndex = index;
            this.showType = index;
            this.orderParam.pageNo = 1;
            switch(index){
                case 0://全部订单
                    this.orderParam.status = '';
                break;
                case 1://待付款
                    this.orderParam.status = 10;
                break;
                case 2://待出行
                    this.orderParam.status = 20;
                break;
                case 3://已成交--待点评
                    this.orderParam.status = 30;
                break;
                case 4://退款/售后
                    this.orderParam.status = 50;
                break;
            }
            this.myOrder();
        },
        onReachBottom(){
            if(this.orderList.length >= this.dataJson.total){
                return;
            }
            this.orderParam.pageNo++;
            this.$api.myOrder(this.orderParam).then(json=>{
                this.orderList = this.orderList.concat(this.dataDeal(json).list);
            });
		},
        pay(item){
            //支付成功
            this.preDataId = item.id
            this.requestPayment();
        },
        orderResult(){//支付成功通知后端更改订单状态
            this.$api.orderResult({
                id:this.preDataId
            }).then(()=>{
                this.myOrder();
            })
        },
        async requestPayment(){
            let orderInfo = await this.getOrderInfo();
            if(orderInfo.code == -1) {
                uni.showModal({
                    content: orderInfo.message,
                    showCancel: false,
                    success: (res)=> {
                        this.myOrder();
                     
                    }
                })
                return;
            }
            orderInfo.data.package = orderInfo.data.packageValue
            uni.requestPayment({
                provider: 'wxpay',
                ...orderInfo.data,
                success: (e) => {
                    uni.showToast({
                        title: "支付成功!",
                        icon: 'none',
                    });
                    this.orderResult();
                },
                fail: (e) => {
                    console.log("fail", e);
                    if(e.errMsg == "requestPayment:fail cancel"){//商户取消
                        // this.payTips = true;
                    }else{
                        uni.showModal({
                            content: "支付失败!",
                            showCancel: false
                        })
                    }
                },
                complete: () => {
                    // this.providerList[index].loading = false;
                }
            })
        },
        getOrderInfo() {
            return new Promise((res,rej) => {
                this.$api.orderDetail({
                    id:this.preDataId
                }).then(json=>{
                    if(json.status == 40){//已取消
                        uni.showToast({
                            title: "因超时未支付，订单已取消",
                            icon: 'none',
                        });
                        setTimeout(()=>{
                            this.myOrder();
                        },1000)
                    }else if(json.status == 10){//待支付
                        this.$api.orderPrepay({
                            orderId:this.preDataId,
                            appType:1
                        }).then(json=>{
                            res(json);
                        })
                    }
                })
            });
        },
        payOnceAgn(item){
            uni.navigateTo({
				url: '/pages/detail/detail?merchId='+ item.merchId
			});
        },
        countDownTime(){
            let m,s,diffTime;//30分钟
            clearInterval(this.timer);
            // this.testEndTime =[20+Date.parse(new Date())/1000,50+Date.parse(new Date())/1000,80+Date.parse(new Date())/1000];
            this.timer = setInterval(()=>{
                let NowStamp = Date.parse(new Date());
                for(let i = 0;i<this.orderList.length;i++){
                    if(this.orderList[i].status == 10){
                        diffTime = (this.orderList[i].payEndTime - NowStamp)/1000;
                        // diffTime = this.testEndTime[i] - NowStamp/1000;
                        if(diffTime>0){
                            m = util.getMinSec(diffTime).m;
                            s = util.getMinSec(diffTime).s;
                            this.orderList[i].countTime = `${m}分${s}秒`;
                            this.orderList.splice(i,1,this.orderList[i])
                        }else{
                            this.orderList[i].status = 40;
                            this.orderList[i].statusType = '已取消';
                            this.orderList[i].countTime = `00分00秒`;
                            if(this.orderList.length){
                                // this.myOrder();
                            }
                        }
                    }
                }
            },1000);
        },
        myOrder(){
            this.orderList = [];
            // uni.showLoading({  
            //     title: '加载中'  
            // });
            this.$api.myOrder(this.orderParam).then(json=>{
                // uni.hideLoading(); 
                this.dataJson = json;
                if(json.list.length){
                    this.noData = false,
                    this.orderList = this.dataDeal(json).list;
                }else{
                     this.noData = true;
                }
            });
        },
        dataDeal(json){
            let diff = 30,start = 20;
            json.list.map((item,index)=>{
                item.nowTime = new Date();
                item.createdTime  = util.FormatDate(new Date(Number(item.createdTime )),'yyyy-MM-dd hh:mm');
                item.merchEffectDate  = util.FormatDate(new Date(Number(item.merchEffectDate )),'yyyy年MM月dd日');
                switch (item.status){
                    case 10:
                        let NowStamp = Date.parse(new Date());
                        let diffTime = (item.payEndTime - NowStamp)/1000;
                        // console.log(diffTime)
                        // if(diffTime<0){
                        //     item.status = 40;
                        //     item.statusType = '已取消';
                        //     item.countTime = `00分00秒`;
                        // }else{
                            item.statusType = '待付款';//待付款
                            let m = util.getMinSec(diffTime).m;
                            let s = util.getMinSec(diffTime).s;
                            item.countTime = `${m}分${s}秒`;
                        // }
                    break;
                    case 20:
                        item.statusType = '待出行';//待出行
                    break;
                    case 30:
                        item.statusType = '已成交';//待出行
                    break;
                    case 40:
                        item.statusType = '已取消';
                    break;
                    case 50:
                        item.statusType = '已退款';//退款/售后
                    break;
                }
                this.countDownTime();
                this.testEndTime.push(start+diff*index+Date.parse(new Date())/1000);
            });
            return json;
        },
        ToOrderDetail(item){//去详情
            uni.navigateTo({
                url: '/pages/orderDetail/orderDetail?orderId='+item.id
            });
        }
    },
    onShow() {
        this.switchBar(Number(this.showType));
    },
    onUnload(){
        clearInterval(this.timer)
    },
    // onPullDownRefresh:function(){
    //     this.switchBar(Number(this.showType));
    // },
}
</script>
<style lang="scss" scope>
    page,.uni-container-orderList{
        height: 100%;
    }
</style>
<style lang="scss" >
    .fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
    .Ellipsis{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .uni-container-orderList{
        background: #F7F7F7;
        // padding-bottom: 100upx;
        // box-sizing: border-box;
        // overflow: hidden;
        .header{
            height:120upx;
            box-sizing: border-box;
            padding: 24upx 18upx;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #F7F7F7;
            span{
                font-size: 28upx;
                color: #262626; 
                font-weight: bold; 
                display: block;
                width: 134upx;
                height: 40upx;
                padding-bottom: 24upx;
                text-align: center;
                margin-left: 10upx;
                position: relative;
                &:last-child{
                    margin-left:0;
                }
                &:before{
                    content: "";
                    display: inline-block;
                    background: #E25422;
                    border-radius: 100px 100px 0 0;
                    width: 64rpx;
                    height: 9rpx;
                    text-align: center;
                    display: none;
                    position: absolute;
                    bottom:-1rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                }
            }
            .Tabactive{
                color: #262626;
                &::before{
                    display: block;
                }
            }
        }
        .order-list{
            padding: 0 22upx;
            padding-top: 120rpx;
            padding-bottom: 100upx;
            // height: 100%;
            // overflow-y: scroll;
            background: #F7F7F7;
            li{
                padding: 25upx 0;
                background: #FFFFFF;
                margin-bottom: 24upx;
                .order-info{
                    padding: 0 22upx;
                    font-size: 24upx;
                    color: #777777;
                    padding-bottom: 20upx;
                    border-bottom: 1px solid #EFF3F5;
                }
                .order-buy{
                    padding: 0 22upx;
                    font-size: 28upx;
                    color: #262626;
                    margin: 26upx 0 24upx;
                    .title{
                        display: block;
                        width: 514upx;
                    }
                    .o-p-d{
                        font-size: 30upx;
                        color: #E65126;
                        font-weight: bold;
                        .price{
                            font-size: 36upx;
                            margin-left: 2px;
                        }
                    }
                }
                .order-travl{
                    padding: 0 22upx;
                    font-size: 24upx;
                    margin-bottom: 18upx;
                    color: #777777;
                    .label{
                        // width: 118upx;
                        margin-right: 20upx;
                    }
                    &:last-child{
                        margin-bottom: 28upx;
                    }
                }
                .border{
                    width: 100%;
                    height: 1px;
                    background: #EFF3F5;
                }
                .order-status{
                    padding: 0 22upx;
                    margin-top: 24upx;
                    font-size: 28upx;
                    color: #E65126; 
                    .count-time{
                        display: block;
                        line-height:  68upx;
                        height: 68upx;
                    }
                    .buyBtn{
                        border: 1px solid #E25422;
                        border-radius: 34upx;
                        display: block;
                        width: 178upx;
                        height: 68upx;
                        font-size: 28upx;
                        color: #E25422;
                        text-align: center;
                        line-height:  68upx;
                    }
                    .buyBtnGary{
                        border: 1px solid #D1D1D1;
                        color: #777777;
                        font-weight: bold;
                    }

                }
            }
        }
        .ToComments,.noData{
            background: #F7F7F7;
            padding-top: 220upx;
            text-align: center;
            img{
               width: 230upx;
               height: 220upx; 
               margin-bottom: 30upx;
            }
            div{
                font-size: 26upx;
                color: #777777;
                letter-spacing: 0.65px;
                text-align: center;
                line-height: 44upx;
                font-weight: 800;
            }
        }
    }
</style>
  